<template>
  <div class="hidden lg:block h-[29.16vw] relative">
    <div class="absolute top-0 left-0 h-full swiprer-container">
      <el-carousel height="auto" motion-blur indicator-position :autoplay="false">
        <el-carousel-item v-for="item in banner" :key="item" style="height: 29.16vw">
          <el-image :src="item" fit="cover" class="w-full aspect-[24/7]" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <div class="main-container">
    <div class="container-box lg:py-16 px-4">
      <div class="title-box py-3">
        <div class="title-cn lg:text-4xl lg:mb-4">
          <h2 class="text-2xl text-primary">关于我们</h2>
        </div>
        <div class="title-en text-lg lg:text-xl max-w-screen-2xl mx-auto">
          <span>About HuiChen</span>
        </div>
      </div>
      <IndexAbout></IndexAbout>
    </div>
    <div class="container-box lg:py-16">
      <div class="title-box py-3 px-4">
        <div class="title-cn lg:text-4xl lg:mb-4">
          <h2 class="text-2xl text-primary">产品中心</h2>
        </div>
        <div class="title-en text-lg lg:text-xl max-w-screen-2xl mx-auto">
          <span>Products center</span>
        </div>
      </div>
      <IndexProducts></IndexProducts>
    </div>
    <div class="container-box lg:py-16 px-4">
      <div class="title-box py-3">
        <div class="title-cn lg:text-4xl lg:mb-4">
          <h2 class="text-2xl text-primary">解决方案</h2>
        </div>
        <div class="title-en text-lg lg:text-xl max-w-screen-2xl mx-auto">
          <span>solution</span>
        </div>
      </div>
      <IndexSolution></IndexSolution>
    </div>
    <div class="container-box lg:py-16 px-4">
      <div class="title-box py-3">
        <div class="title-cn lg:text-4xl lg:mb-4">
          <h2 class="text-2xl text-primary">推荐产品</h2>
        </div>
        <div class="title-en text-lg lg:text-xl max-w-screen-2xl mx-auto">
          <span>Recommended Products</span>
        </div>
      </div>
      <IndexRecommended></IndexRecommended>
    </div>
  </div>
  <div class="friendship-link text-sm p-3 leading-6">
    <span>友情链接：</span>
    <span class="divide-x">
      <a :href="item.url" target="_blank" v-for="item in friendshipLink" class="lg:hover:text-primary border-[#999] mr-2 pl-2 lg:mr-3 lg:pl-3 first:pl-0">{{ item.name }}</a>
    </span>
  </div>
</template>

<script setup>
// 轮播图
const banner = ref(["/images/slide/202210121628045434.jpg", "/images/slide/202210121605121350.jpg", "/images/slide/20221012161909645.jpg"]);

// 友情链接
const friendshipLink = ref([
  {
    name: "百度",
    url: "https://www.baidu.com",
  },
  {
    name: "星光科技",
    url: "https://www.baidu.com",
  },
]);
const scrollWidth = ref("");
onMounted(() => {
  scrollWidth.value = `${document.body.scrollWidth + 8}px`;
  window.onresize = () => {
    scrollWidth.value = `${document.body.scrollWidth + 8}px`;
  };
  console.log(scrollWidth.value);
});
</script>
<style scoped lang="scss">
.swiprer-container {
  width: v-bind(scrollWidth);
  left: min(0px, calc(-1 * (100vw - 1536px) / 2));
}
.title-box {
  .title-cn {
    text-align: center;
    // color: $primary;
  }
  .title-en {
    color: #b2b2b2;
    text-align: center;
    font-family: helvetica;
    font-weight: normal;
    text-transform: uppercase;
    span {
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 1px;
        display: block;
        left: -30px;
        background-color: #e0e0e0;
        top: 10px;
      }
      &::after {
        right: -30px;
        left: auto;
      }
    }
  }
}
// 内容
.container-box {
  &:nth-child(even) {
    background-color: #f5f5f5;
  }
}
</style>
